<template>
  <div class="forgetPassword">
    <div class="forget-box">
      <div>邮箱账号 : </div>
      <div><el-input v-model="input"
       @blur="inputJinGao5"
       placeholder="请输入你的邮箱"></el-input></div>
      <div class="forgetYan"><el-input v-model="yanzheng"
       @input="panduan"
       placeholder="验证码"></el-input>  <el-button @click="getChecking" type="primary" :disabled="buttonDis">{{checking}}</el-button></div>
    </div>

      <div class="newPassword" v-if="!buttonDis2">
        <div> <el-input placeholder="请输入新密码" v-model="password"
         @input="newPaw"
         show-password></el-input> </div>
      </div>

      <div class="forgetWan"> <el-button type="primary" @click="updatePaw" :disabled="buttonDis3">完成</el-button> </div>
  </div>
</template>

<script>
import { request } from "../../network/request";

export default {
    name:'ForgetPassword',
    data() {
      return {
        input: '',
        yanzheng: '',
        buttonDis:true,
        buttonDis2:true,
        buttonDis3:true,
        password:'',
        checking:'获取验证码',
        checkingTime:'120'
      }
    },
    methods: {
      getChecking(){
            request({
                url: "/user/sendEmailTo",
                method:"post",
                params:{
                    userEmail:this.input,
                }
            })
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            });

            this.checkingFlag = setInterval(()=>{
                this.checking = this.checkingTime+'s'
                this.checkingTime--
                this.buttonDis = true

                if(this.checkingTime==0){
                this.flag = clearInterval(this.checkingFlag)
                this.checking="重新获取"
                this.checkingTime=120
                this.buttonDis = false
            } 
		    },1000)
        },

        panduan(){
          request({
                url: "/user/verificationCode",
                method:"post",
                params:{
                    code : this.yanzheng,
                    userEmail:this.input,
                }
            })
            .then((res) => {
                if(res.data.code == 200){
                  this.buttonDis2 = false
                }
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            });
        },

        newPaw(){
          if(this.password!=null){
            this.buttonDis3 = false
          }
        },

        inputJinGao5(){
          let verify = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;;
            if(this.input==''||!verify.test(this.input)){
                 this.$alert('邮箱格式错误', '提示', {
                  confirmButtonText: '确定',
                });
                
            }else{
              request({
                url: "/user/isSendEmail",
                params:{
                    email : this.input,
                }
              })
              .then((res) => {
                  if(res.data.data == "没有被注册"){
                    this.$alert('该邮箱未注册,请先继续注册', '提示', {
                      confirmButtonText: '确定',
                      callback: () => {
                        this.$router.push('/registerpage')
                      }
                    });
                  }else{
                    this.buttonDis = false
                  }
                  console.log(res);
              })
              .catch((err) => {
                  console.log(err);
              });

            }
        },

        updatePaw(){
          request({
                url: "/user/updatePassword",
                method:"post",
                params:{
                    newPassWord : this.password,
                    userEmail:this.input,
                }
            })
            .then((res) => {
                this.$router.push('/loginpage')
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            });
        }
    },
}
</script>

<style>

.forgetPassword{
  width: 2.5rem;
  font-size: 0.13rem;
  margin: 0 auto;
  margin-top: 1.5rem;
}

.forget-box input{
  margin-top: 0.15rem;
}

.forgetYan{
  display: flex;
  align-items: center;
  margin-top: 0.15rem;
}

.forgetYan input{
  width: 1.5rem;
}

.forgetYan button{
  font-size: 0.1rem;
  width: 1.2rem;
  height: 0.33rem;
  margin-top: 0.15rem;
}

.forgetWan{
  text-align: center;
  margin-top: 0.5rem;
}

.forgetWan button{
  width: 2.5rem;
  font-size: 0.13rem;
}

.newPassword{
  margin-top: 0.5rem;
}

</style>